<template>
<div>
  <van-nav-bar title="个体户申请" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
  <van-notice-bar left-icon="volume-o" style="margin-top: 46px;" scrollable>如需人工服务请致电 111-222-3333，帮您人工申请。</van-notice-bar>
  <div class="title">请填写您的个人信息</div>
  <van-form @submit="onSubmit">
    <van-field v-model="username" name="姓名" label="姓名" placeholder="请输入您的姓名" />
    <van-field readonly clickable name="picker" :value="value" label="性别" placeholder="点击选择您的性别" @click="showPicker = true" />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <van-field readonly clickable name="datetimePicker" :value="valueTime" label="出生日期" placeholder="点击选择您的出生日期" @click="showTimePicker = true" />
    <van-popup v-model="showTimePicker" position="bottom">
      <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="onTimeConfirm" @cancel="showTimePicker = false" />
    </van-popup>
    <van-field v-model="mobile" name="联系电话" label="联系电话" placeholder="请输入您的联系电话" />
    <van-field v-model="address" name="联系地址" label="联系地址" placeholder="请输入您的联系地址" />
    <van-field v-model="nativePlace" name="籍贯" label="籍贯" placeholder="请输入您的籍贯" />
    <van-field v-model="national" name="民族" label="民族" placeholder="请输入您的民族" />
    <van-field v-model="email" name="邮箱" label="邮箱" placeholder="请输入您的邮箱" />
    <van-field v-model="idCard" name="身份证号码" label="身份证号码" placeholder="请输入您的身份证号码" />
    <div class="title">请填写您的农场信息</div>
    <van-field v-model="farmAddress" name="农场地址" label="农场地址" placeholder="请输入您的农场地址" />
    <van-field v-model="cropType" name="农作物类型" label="农作物类型" placeholder="请输入您的农作物类型" />
    <van-field v-model="remark" rows="2" name="备注" autosize label="备注" type="textarea" maxlength="50" placeholder="请输入您的备注" show-word-limit />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</div>
</template>

<script>
import {
  Dialog
} from 'vant';
export default {
  name: 'individual',
  data() {
    return {
      username: '',
      value: '',
      showPicker: false,
      columns: ['男', '女'],
      showTimePicker: false,
      valueTime: '',
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'farmerApply'
      })
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onTimeConfirm(time) {
      const newTime = (new Date(time).getTime())
      const time1 = this.formatDate(newTime)
      this.valueTime = time1
      this.showTimePicker = false;
    },
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      return y + '年' + MM + '月';
    },
    onSubmit(values) {
      console.log('submit', values);
      Dialog.alert({
        title: '提交审核',
        message: '已将身份信息提交至后台请等待审核结果',
        theme: 'round-button',
      }).then(() => {
        this.$router.push({ name: 'main' })
      });
    },
  },
}
</script>

<style scoped>
.title {
  margin: 10px 0 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 13px;
  color: #6A6F7A;

}

.van-form {
  overflow: hidden;
  border-radius: 8px;
  margin-top: 5px;
}
</style>
